<template>
    <VertifyFrameSet class="find-back" @submit="findBack" :tipShow="tipShow">
    <template v-slot:main>
      <!-- 左边 -->
      <div class="left-side">
        <h1>Find Back <br />Your Account</h1>
        <div class="h1-att">open access</div>
        <p>
          邮箱和用户名是绑定的，所以你只需要填写邮箱或者用户名，
          即可发送邮件到您的邮箱，通过授权码进行验证和密码双重保证
          安全登入。
        </p>
      </div>
      <!-- 左边 -->

      <!-- 右边 -->
      <div class="right-side">

        <!-- 表单框 -->
        <div class="input-box">
          <div class="input-att">User/Email</div>
          <div class="input"><input type="text" name="vertify" v-model="form.vertify"></div>
        </div>
        <!-- 表单框 -->

        <!-- 验证码 -->
        <div class="input-box">
          <div class="input-att">Code</div>
          <div class="input">
            <InputNumber  type="text"  name="code" v-model="form.code" maxlength="6" />
            <OnceTimingClick
              @timingRun="findPasswordCode"
             class="code-att" onText="发送验证码" offText="重发时间" :time="6" />
          </div>
        </div>
        <!-- 验证码 -->


        <div class="input-box">
          <div class="input-att">NewPassword</div>
          <div class="input"><input type="text" name="newPassword" v-model="form.newPassword"></div>
        </div>

        <div  class="from-att">
          <router-link tag="a" :to="{name: 'Register'}">未有账号？Sign Up</router-link>
        </div>
        

        <!-- 提交按钮 -->
        <div class="submit" @click="findBack" ref="submit">Find Back</div>

        <div class="from-att">
          <router-link tag="a" :to="{name: 'Login'}" >想起密码？Sign In</router-link>
        </div>
        
      </div>
    </template>
    <template v-slot:tipContent>
      <div class="warning-note">

        <div class="tip-text"><span>at present</span>： {{tipText}}</div>

        <div class="warning-title">
          Avoid the following situations <br />
        </div>
        <ul class="hint-box">
          <li class="hint"> 用户名和邮箱都可，但是必须是相互绑定的</li>
          <!-- <li class="hint">The mailbox must be correct, or it will not receive the verification code. 注意要国内的啦</li> -->
          <li class="hint"> 验证码是6位数，有且仅有6位，并且是数字，注意验证码只能在同一个设备有效 </li>
          <!-- <li class="hint">The captcha is a four-digit code with and only four digits</li> -->
          <li class="hint"> 密码最短是6位 </li>
          <!-- <li class="hint">The minimum password is 8 bits</li> -->
        </ul>
        <div class="close-pop-up" @click="tipShow=false">ok</div>
      </div>
    </template>
  </VertifyFrameSet>
</template>

<script>
import { findPassword } from '__SERVICE__/user.js'
import { findPasswordCode } from '__SERVICE__/email_code.js'
import OnceTimingClick from '__COMPONENTS__/once_timing_click/OnceTimingClick.vue'
import VertifyFrameSet from '__LAYOUTS__/vertify_frame_set/VertifyFrameSet.vue'
import InputNumber from '__COMPONENTS__/input_number/InputNumber.vue'


export default {
  name: 'Register',
    components: {
    VertifyFrameSet,
    OnceTimingClick,
    InputNumber
  },
  data: ()=>({
    form: {
      vertify: '',
      code: '',
      newPassword: ''
    },
    tipShow: false,
    tipText: '',
  }),
  methods: {
    findBack() {
      const {vertify, code, newPassword} = this.form
      //用户名
      if(!vertify.length) {
        this.tipText = '用户名或邮箱不能为空'
        this.tipShow = true
        return
      }
      //验证码
      if(code.length < 6) {
        if(!vertify.length) this.tipText = '验证码不能为空'
        else this.tipText = '验证码位数不足'
        this.tipShow = true
        return
      }
      //密码
      if(newPassword.length < 6) {
        this.tipText = '密码小于6位'
        this.tipShow = true
        return
      }

      this.findPassword()
    },
    //发送找回密码验证码
    async findPasswordCode() {
      findPasswordCode(this.form.vertify)
    },
    //真正提交修改密码
    async findPassword() {
      try {
        const result = await findPassword(this.form)
        //跳转回登入
        this.$Notice.success({
          title: '修改成功',
          desc: '跳转登入',
          duration: 2000
        })
        setTimeout(()=>{this.$router.push({name: 'Login'})}, 500)
      }catch(e) {
        const {messageAuthor, message} = e
        this.tipText = message
        this.tipShow = true
      }
    }
  },
  mounted() {

  }
}
</script>

<style lang="less">
  
</style>